<script>
  import $ from '../dfish.js'
  import {h} from 'vue'
  import WidgetBase from './WidgetBase.vue'
  import AlignParent from './AlignParent.vue'

  export default {
    name: 'w-label',
    mixins: [WidgetBase, AlignParent],
    props: ['text', 'suffix', 'vertical'],
    methods: {
      html_slots() {
        return h('label', {class: 'w-label-text'}, 
          h('span', this.$slots.default ? this.$slots.default() : this.x.text + (this.x.suffix == null ? '' : this.x.suffix)))
      }
    },
    computed: {
      html_class() {
        this.x.vertical && (this.$parent.labelVertical = true)
        return ['f-oh f-br' + (this.x.vertical ? ' z-vertical' : ''), this.html_align_class]
      }
    }
  }
</script>

<style>

</style>
